<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <!-- 引入样式 -->
    <link href="layx/layx.css" rel="stylesheet" type="text/css"/>
    <script src="layx/layx.js" type="text/javascript"></script>
    <#include "/common/element-ui.ftl">
    <#include "/common/http.ftl">
</head>
<body>
<div id="app">
<#--<h1>{{msg}}</h1>-->
<#--<el-button type="success" round @click="fail">成功按钮</el-button>-->
    <div style="display: flex;flex-flow:  row">
        <div style="width: 60%">
            <el-radio-group v-model="del" @change="cDel">
                <el-radio-button label="0">启用</el-radio-button>
                <el-radio-button label="1">禁用</el-radio-button>
            </el-radio-group>

            <el-table
                    :data="tableData"
                    border>
                <el-table-column
                        prop="emp_no"
                        label="员工编号"
                        width="150">
                </el-table-column>

                <el-table-column
                        prop="name"
                        label="姓名"
                        width="150">
                </el-table-column>

                <el-table-column
                        label="状态"
                        width="150">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.is_del| statusCN}}</span>
                    </template>
                </el-table-column>


            <#--<el-table-column-->
            <#--prop="name"-->
            <#--label="姓名"-->
            <#--width="120">-->
            <#--</el-table-column>-->
            <#--<el-table-column-->
            <#--prop="province"-->
            <#--label="省份"-->
            <#--width="120">-->
            <#--</el-table-column>-->
            <#--<el-table-column-->
            <#--prop="city"-->
            <#--label="市区"-->
            <#--width="120">-->
            <#--</el-table-column>-->
            <#--<el-table-column-->
            <#--prop="address"-->
            <#--label="地址"-->
            <#--width="300">-->
            <#--</el-table-column>-->
            <#--<el-table-column-->
            <#--prop="zip"-->
            <#--label="邮编"-->
            <#--width="120">-->
            <#--</el-table-column>-->
                <el-table-column
                        fixed="right"
                        label="操作"
                        >
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                        <#--<el-button type="text" size="small">编辑</el-button>-->
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <span class="demonstration">完整功能</span>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="listSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="listCount">
                </el-pagination>
            </div>
        </div>
        <div style="flex-grow:1;">
            <el-button-group>
                <el-button type="primary"
                           <#--icon="el-icon-edit" -->
                           @click="add">新增</el-button>
                <#--<el-button type="primary" icon="el-icon-share"></el-button>-->
                <#--<el-button type="primary" icon="el-icon-delete"></el-button>-->
            </el-button-group>
            <el-form ref="form" :model="form"
                     label-width="80px"
                     style="border: 1px solid gray;">
                <el-form-item label="员工编号">
                    <el-col :span="11">
                        <el-input v-model="form.staffNO"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-col :span="11">
                        <el-input v-model="form.name"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="form.radio2">
                        <el-radio :label="3">男</el-radio>
                        <el-radio :label="6">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="生日">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="form.date1"
                                        style="width: 100%;"></el-date-picker>
                    </el-col>
                <#--<el-col class="line" :span="2">-</el-col>-->
                <#--<el-col :span="11">-->
                <#--<el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>-->
                <#--</el-col>-->
                </el-form-item>
                <el-form-item label="部门">
                    <el-col :span="11">
                        <el-input
                                placeholder="请输入内容"
                                v-model="form.department"
                                :disabled="true">
                        </el-input>
                    </el-col>
                    <el-button type="primary" icon="el-icon-edit" @click="chooseDepartment"></el-button>
                </el-form-item>
                <el-form-item label="职级">
                    <el-select v-model="form.rankId" placeholder="请选择职级">
                        <el-option
                                v-for="(item,index) in rankList"
                                :key="index"
                                :label="item.label"
                                :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="职位">
                    <el-select v-model="form.positionId" placeholder="请选择职位">
                        <el-option
                                v-for="(item,index) in positionList"
                                :key="index"
                                :label="item.label"
                                :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="form.status" placeholder="状态">
                        <el-option label="启用" value="0"></el-option>
                        <el-option label="禁用" value="1"></el-option>
                    </el-select>
                </el-form-item>
            <#--<el-form-item label="即时配送">-->
            <#--<el-switch v-model="form.delivery"></el-switch>-->
            <#--</el-form-item>-->
            <#--<el-form-item label="活动性质">-->
            <#--<el-checkbox-group v-model="form.type">-->
            <#--<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>-->
            <#--<el-checkbox label="地推活动" name="type"></el-checkbox>-->
            <#--<el-checkbox label="线下主题活动" name="type"></el-checkbox>-->
            <#--<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>-->
            <#--</el-checkbox-group>-->
            <#--</el-form-item>-->
            <#--<el-form-item label="特殊资源">-->
            <#--<el-radio-group v-model="form.resource">-->
            <#--<el-radio label="线上品牌商赞助"></el-radio>-->
            <#--<el-radio label="线下场地免费"></el-radio>-->
            <#--</el-radio-group>-->
            <#--</el-form-item>-->
            <#--<el-form-item label="活动形式">-->
            <#--<el-input type="textarea" v-model="form.desc"></el-input>-->
            <#--</el-form-item>-->
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">{{saveOrUpdate|s_uCN}}</el-button>
                    <#--<el-button>取消</el-button>-->
                </el-form-item>
            </el-form>
        </div>
    </div>


</div>

<#noparse>
<script>
    //    layx.html('str','字符串文本','Hello Layx!');
    var mv = new Vue({
        el: "#app",
        mounted() {
//            console.log($)
//            console.info(layx);
        },
        created() {
            this.cDel();
        },
        filters: {
            statusCN(value) {
                if (value == 1)
                    return "禁用"
                return "启用";
            },
            s_uCN(value){
                if(value ==1)
                    return "保存";
                return "更新";
            }
        },
        methods: {
            chooseDepartment() {
                var form = this.form;
                layx.iframe('chooseDepartment', '部门选择', 'staffController.do?go&ftl=department-choose', {
                    statusBar: true,
                    buttons: [
                        {
                            label: '保存',
                            callback: function (id, button, event) {
                                // 获取 iframe 页面 window对象
                                var contentWindow = layx.getFrameContext(id);
//                                alert(contentWindow.document.body.innerHTML);
                                var input = contentWindow.document.getElementById("chasedDepartment");
                                var department = input.getAttribute("department");
                                var departmentJson = JSON.parse(department);
//                                console.info("department", departmentJson.name);
                                form.department = departmentJson.name;
                                form.departmentId = departmentJson.id;
                                layx.destroy(id);
                            }
                        },
                        {
                            label: '取消',
                            callback: function (id, button, event) {
                                layx.destroy(id);
                            }
                        }
                    ]
                });
//                layx.max('add');//222
            },
            onSubmit() {
//                console.info(this);
//                console.log(this.chuanzhi);
                if(this.saveOrUpdate ==1){//新增
                    post('')
                }
//
            },
            handleSizeChange(val) {
//                console.log(`每页 ${val} 条`);
                this.listSize=val;
                this.cDel();
            },
            handleCurrentChange(val) {
//                console.log(`当前页: ${val}`);
                this.currentPage=val;
                this.cDel();
            },
            handleClick(row) {
//                console.log(row);

            },
//            fail() {
//                this.msg = "fail";
//            },
            add() {
                console.info(this.tableData)
            },
            cDel(){
                post('staffController.do?getStaffList',{
                    del:this.del,
                    page:this.currentPage,
                    size:this.listSize,
                },response=>{
//                console.info("table",this.tableData);
                    this.tableData=response.list;
                    this.listCount=response.count;
                });
            },
        },
//        data:{
//            tableData:[{name:'cc1'}],
//            msg:'',
//            currentPage1: 5,
//            currentPage2: 5,
//            currentPage3: 5,
//            currentPage4: 4,
//
//            form: {
//                name: '',
//                staffNo: '',
//                region: '',
//                date1: '',
//                date2: '',
//                delivery: false,
//                type: [],
//                resource: '',
//                desc: '',
//                radio2: 3,
//                department: "",
//                departmentId: "",
//                rankId: "",
//                status:'',
//            },
//            rankList:[],
//            positionList:[],
//            del:1,
//        },
        data() {
            var tableDataItem = {
                date: '2016-05-02',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            };
            var tableData = [];
//            for (var i = 0; i < 10; i++) {
//                tableData.push(JSON.parse(JSON.stringify(tableDataItem)));
//            }
            var rankList = [];
            for (var i = 0; i < 3; i++) {
                rankList.push({lable: "label" + i, value: "value" + i})
            }
            var positionList = [];
            for (var i = 0; i < 3; i++) {
                positionList.push({lable: "label" + i, value: "value" + i})
            }

            var msg = "你好";
            var json = {
                tableData,
                listCount:0,
                listSize:10,
                msg, currentPage: 1,
                saveOrUpdate:1,
//                currentPage2: 5,
//                currentPage3: 5,
//                currentPage4: 4,

                form: {
                    name: '',
                    staffNo: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: '',
                    radio2: 3,
                    department: "",
                    departmentId: "",
                    rankId: "",
                    status: '',
                },
                rankList,
                positionList,
                del: 0,

            };
            return json;
        }
    });
    mv.chuanzhi = "传值";
</script>
</#noparse>

</body>
</html>